<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <el-row>
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="orderObj.query" clearable @clear='getOrder'>
                        <el-button slot="append" icon="el-icon-search" @click="getOrder"></el-button>
                    </el-input>
                </el-col>                
            </el-row>
            <!-- 表格 -->
            <el-table :data="orderList" border style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="order_number" label="订单编号" ></el-table-column>
                <el-table-column prop="order_price" label="订单价格" ></el-table-column>  
                <el-table-column prop="pay_status" label="是否付款" >
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.pay_status == 0">未付款</el-tag>
                        <el-tag type="success" v-else>已付款</el-tag>
                    </template>
                </el-table-column>  
                <el-table-column prop="is_send" label="是否发货" ></el-table-column>  
                <el-table-column prop="create_time" label="下单时间" ></el-table-column>  
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" content="修改" placement="top" :enterable='false'>
                            <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="定位" placement="top" :enterable='false'>
                            <el-button type="success" icon="el-icon-location" size="small"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>                
            </el-table>
            <!-- 分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="orderObj.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="orderObj.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>        
    </div>
</template>

<script>
export default {
    data () {
        return {
          //获取的每一页多少条数
           orderObj:{
               query:'',
               pagenum:1,
               pagesize:10
           },
           //列表数据
           orderList:[],
           //总条数
           total:0
        }
    },
    created() {
        this.getOrder()
    },
    methods: {
       async getOrder () {
            const res = await this.$http.get('orders',{params:this.orderObj})
               if(res.data.meta.status == 200){
                  this.orderList = res.data.data.goods
                  this.total = res.data.data.total
               } else{
                    return this.$message.error('获取数据失败');
               }
        },
        //每页条数
        handleSizeChange (newPagesize) {
           this.orderObj.pagesize = newPagesize
           this.getOrder()
        },
        //当前页数
        handleCurrentChange (newPagenum) {
          this.orderObj.pagenum = newPagenum
          this.getOrder()
        }
    }
    
}
</script>

<style lang="less" scoped>

</style>